@import '../../theme/style/variables.module.less';

.container {
    position: fixed;
    z-index: @mi-zindex + 100;
    
    :global(.ant-popover) {
        &-content,
        &-inner {
            background: var(--mi-notice-background);
            .frosted();
            .border(var(--mi-notice-border));
            .radius(16);
            max-height: calc(100vh - 10rem);
        }

        &-arrow {
            &:before {
                background: var(--mi-notice-background);
            }
        }
    }
}

.content {
    .flex(flex-start, flex-start, column);
    color: var(--mi-notice-text);
    .transition();
    .properties(min-height, 160);
    overflow: hidden;

    :global {
        swiper-container {
            width: 100%;
        }

        swiper-slide {
            width: auto;

            &.active {
                .mi-notice-tab {
                    .gradient-hint(var(--mi-notice-tab-background-start), var(--mi-notice-tab-background-hint), var(--mi-notice-tab-background-stop));

                    .anticon {
                        color: var(--mi-notice-tab-icon-active);
                    }

                    &-name {
                        color: var(--mi-notice-tab-text-active);
                    }
                }
            }
        }
    }
}

.empty {
    .properties(padding-left, 24);
    .properties(padding-right, 24);
    .flex(center, center, column);

    &-time {
        .flex();
        .properties(margin-bottom, 16);
    }

    &-date,
    &-week {
        .font-size(18, bold);
    }

    &-week {
        .properties(margin-left, 16);
    }

    &-title {
        .font-size(32, bold);
        .flex();
        .properties(margin-top, 16);
    }

    &-items {
        .flex(center, center, column);
        .properties(margin-top, 12);
    }

    &-item {
        .properties(margin-bottom);

        :global(.ant-checkbox) {
            & + span {
                color: var(--mi-notice-text);
            }
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    &-fine {
        .flex();
        .font-size(24);
        .properties(margin-top, 16);
        .properties(margin-bottom, 16);

        :global(.anticon) {
            .properties(margin-right);
        }
    }
}

.tabs {
    position: relative;
}

.tab {
    width: 100%;
    height: 100%;
    .radius(8);
    .flex(center, center, column);
    .properties(padding-top);
    .properties(padding-bottom);
    .properties(padding-left, 24);
    .properties(padding-right, 24);
    color: var(--mi-notice-tab-text-default);
    background: var(--mi-notice-tab-background-default);
    cursor: pointer;

    &-icon {
        :global(.anticon) {
            .font-size(32);
            color: var(--mi-notice-tab-icon-default);
            .properties(margin-bottom);
        }
    }

    &-name {
        color: var(--mi-notice-tab-text-default);
        .font-size(14, bold);
        .properties(max-width, 128);
        .ellipsis();
        display: block;
    }

    &:hover &-icon {
        :global(.anticon) {
            color: var(--mi-notice-tab-icon-hover);
        }
    }

    &:hover &-name {
        color: var(--mi-notice-tab-text-hover);
    }

    &-active {
        .gradient-hint(var(--mi-notice-tab-background-start), var(--mi-notice-tab-background-hint), var(--mi-notice-tab-background-stop));
    }

    &-active &-icon,
    &-active:hover &-icon {
        :global(.anticon) {
            color: var(--mi-notice-tab-icon-active);
        }
    }

    &-active &-name,
    &-active:hover &-name {
        color: var(--mi-notice-tab-text-active);
    }
}

.icon {
    .flex();
    color: var(--mi-notice-icon-default);
    cursor: pointer;
}

.items {
    width: 100%;
    .properties(margin-top, 16);
    .properties(max-height, 340);
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    .transition();
}

.extra {
    width: 100%;
    .flex(flex-start, flex-start, column);
}

:export {
    --notice-text: var(--mi-on-surface-variant);
    --notice-background: var(--mi-surface-variant);
    --notice-border: var(--mi-surface-variant);
    --notice-tab-icon-default: var(--mi-on-background);
    --notice-tab-icon-active: var(--mi-on-secondary);
    --notice-tab-icon-hover: var(--mi-on-background);
    --notice-tab-text-default: var(--mi-on-background);
    --notice-tab-text-active: var(--mi-on-secondary);
    --notice-tab-text-hover: var(--mi-on-background);
    --notice-tab-background-default: rgba(var(--mi-rgb-background), .5);
    --notice-tab-background-start: var(--mi-primary);
    --notice-tab-background-hint: var(--mi-secondary);
    --notice-tab-background-stop: var(--mi-tertiary);
}